Blog Dev

Leveling up my IndieWeb game

Introducing Webmentions

Photo by Ilya Pavlov on Unsplash

A couple of days ago, I wrote about my first steps in the world of the IndieWeb. Then, I said my next steps were enriching my posts with microformats and implementing webmentions.

I did both of those things. I feel good.

The mythical Webmention

Webmentions is the new and improved version of the good old pingback. It’s a protocol that allows one website to notify another that you mentioned them. It’s as simple as that. But it’s also more than that: the interactions are not limited to mentions; a webmention can be a “like,” a repost, or a comment.

Like any other protocol, there are two parts to Webmentions: sending them and receiving them. I started with the easy one: receiving them.

Receiving Webmentions

The protocol isn’t that complex, and I may want to try and implement an endpoint someday. Still, right now, I’m using the free service Webmention.io by Aaron Parecki.

Webmention.io receives the webmentions for you and lets you query them with a simple HTTP request. You get all your webmentions in a nice JSON object. You could do this call in a client-side script and render them that way. I prefer to make the call during the build process.

I wrote a small script to parse the JSON file with all the webmentions and separate them according to their target and type. I save each file in the same leaf bundle where the rest of the article lives, and I can simply query it from my template while building the site.

For now, I am only displaying likes and comments. The design looks very simple, and I may try to improve it in the future. I will implement other types of webmentions as I receive them if I receive them.

The cool stuff: Bridgy

After I implemented receiving webmentions, and to test them, I connected my Twitter account to Bridgy. This service allows you to transform your social media reactions to actual webmentions. So cool! So now, if you reply to one of my syndicated posts on Twitter, the answer shows up as a webmention under the original article.

The downside: not real-time

The one drawback of only collecting webmentions at build time is that I only build my blog hourly, sometimes not even that often. That means webmentions can take up to an hour to appear on the site after being sent. Is that really bad UX? Do people really expect their webmentions to show up quickly on the target website?

The missing part: sending webmentions

There’s another service that scans your articles to find links to sites with webmentions endpoints and sends them one: webmention.app. I haven’t set it up yet, and for now, I will send webmentions manually.

Next Steps

The webmention display right now is not tagged with any microformats. I believe I’m supposed to include some specific ones for these to be “real” webmentions. That’s my first task.

Next on my to-do list is creating new post types. I want to implement notes (as opposed to blog articles like this) and perhaps photo posts. Maybe even check-ins.

And then, the real fun will be implementing a micropub endpoint that will allow me to use all of these post types from a simple client. Blogging on the go has always been my dream!

Over to you

Do you use webmentions on your website? Do you have a favorite webmention design in the wild? Let me know! Send me a webmention!

2 likes Scott Kingery FaebornNetworks

Webmentions:

Christian Engel

Nice to read about your Indieweb implementations.

[…] I only build my blog hourly, [which] means webmentions can take up to an hour to appear on the site after being sent. Is that really bad UX? Do people really expect their webmentions to show up quickly on the target website?

I struggled with that, too, but I’ve settled for the static approach. I like to embrace the philosophy of slow web, so webmentions are only displayed once I decide to make changes to website (i.e. create new content). Wouter Groenevald (whose blog post about the Indieweb you almost certainly also read) recommended to use client side rendering, if you really need real time webmentions.

[…] the real fun will be implementing a micropub endpoint […]

That’s what I’m also planning to do. I’ll stay tuned for your results.

Leveling up my IndieWeb game

I'm currently in the same process. I've just retrieved and sent my first webmentions two weeks ago. I really like the way you integrated the mentions into you blog, my implementation is still very basic in that regard.

Micropub is also high on my list, after attending the Homebrew Website Club this week, as I'm still missing a convenient and fast method to create new post. Especially shorter once, like replies to post.

Indie Random Websites

Great job!


Privacy Policy Affiliate Disclosure